<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>todo</title>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <!-- <script src="bower_components/react/react-with-addons.js"></script> -->
    <script src="./JSXTransformer.js"></script>
</head>
<body>
    <div id="app"></div>
    <center>
        <p>Notice: Double-click to edit a todo</p>
    </center>


    <script type="text/jsx" src="main.jsx?new"></script>
    <style>
        #app{
            width: 500px;
            margin: 0 auto;
        }
        .done{
            text-decoration: line-through;
        }
        .todos input[type='text'], .view button{
            display: none;
        }
        .view:hover button{
            display: inline;
        }
        .todos .editing input[type='text']{
            display: block;
        }
        .todos .editing .view{
            display: none;
        }
        a{
            text-decoration: none;
            padding: .5rem;
            margin-left: .2rem;
        }
        .selected{
            border: 1px solid red;
        }
    </style>
</body>
</html>
